<template>
	<mu-container>
		<mu-appbar style="width: 100%;">
			<mu-button icon slot="left" @click='$root.back'>
				<mu-icon value="arrow_back"></mu-icon>
			</mu-button>
			手动登录
		</mu-appbar>
		<mu-form ref="form" :model="validateForm" class="mu-demo-form">
			<mu-form-item label="用户名" prop="username" :rules="usernameRules">
			  <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
			</mu-form-item>
			<mu-form-item label="密码" prop="password" :rules="passwordRules">
				<mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
			</mu-form-item>
			<mu-form-item>
			  <mu-button color="primary" @click="submit">提交</mu-button>
			  <mu-button @click="clear">重置</mu-button>
			</mu-form-item>
		</mu-form>
		<Bar class='bar'></Bar>
	</mu-container>
</template>

<script>
	import config from '../config'
	import Bar from '@/components/bar.vue'
	export default {
		components:{
			'Bar':Bar
		},
		data () {
			return {
			  usernameRules: [
				{ validate: (val) => !!val, message: '必须填写用户名'},
			  ],
			  passwordRules: [
				{ validate: (val) => !!val, message: '必须填写密码'},
			  ],
			  validateForm: {
				username: '',
				password: '',
			  },
			  pToken:'',//应用方保留在平台的授权信息
			  token:this.$root.token,
			}
		},
		created () {
			
		},
		methods: {
			submit () {
				var _this = this;
				_this.$refs.form.validate().then((result) => {
					//调用登录接口
					//_this.$toast.success('登录成功！');
					_this.$root.pUser = {
						username : _this.validateForm.username
					}
					
					//调用回调接口
					_this.$root.pTokenBack(_this.validateForm.username);
				});
			},
			clear () {
			  this.$refs.form.clear();
			  this.validateForm = {
				username: '',
				password: '',
			  };
			},
		}
	}
</script>

<style>
	.container{
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.mu-demo-form {
	  width: 90%;
	  max-width: 460px;
	  margin: 10% auto;
	}
	.mu-form-item-label{
		float: left;
		width: 25%;
		display: inline;
		font-size: 1.25rem;
		text-align: left;
	}
	.mu-form-item-content{
		float: left;
		display: inline;
	}
	.mu-appbar-title{
		padding-left: 0px !important;
		padding-right: 3.125rem !important;
	}
	.bar{
		position: fixed;
		bottom: 0px;
	}
</style>
